<template>
  <div id="app">
    <router-view />
    <theme-picker />
  </div>
</template>

<script>
  import ThemePicker from "@/components/ThemePicker";

  export default {
    name: "App",
    components: {
      ThemePicker
    },
    metaInfo() {
      return {
        title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
        titleTemplate: title => {
          return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
        }
      }
    },
    computed: {
      // 新增用户设备是移动端的属性
      userAgentMobile() {
        return window.innerWidth <= 720;
      }
    },
    render(h) {
      return h(this.tag, {
        // 限制属性flex的实现只有在pc端的情况下才有效
        class: [
          'el-row',
          {
            'el-row--flex': !this.userAgentMobile && this.type === 'flex'
          },
          this.justify !== 'start' && !this.userAgentMobile ? `is-justify-${this.justify}` : '',
          this.align !== 'top' && !this.userAgentMobile ? `is-align-${this.align}` : ''
        ],
        // 限制属性gutter只在pc端有效
        style: !this.userAgentMobile ? this.style : {}
      }, this.$slots.default);
    }
  };
</script>
<style scoped>
  #app .theme-picker {
    display: none;
  }

  @media screen and (min-width: 220px) and (max-width: 600px) {
    ::v-deep .el-dialog {
      width: 90% !important;
    }
    ::v-deep .el-col-11{
      width: 100%!important;
    }
    ::v-deep .el-date-editor--timerange.el-input__inner{
      width: 100%!important;
    }
  }
  @media screen and (min-width: 1024px) and (max-width: 1366px) {
    ::v-deep .el-dialog {
      width: 80% !important;
    }
  }
  @media screen and (min-width: 912px) and (max-width: 1368px) {
    ::v-deep .el-dialog {
      width: 80% !important;
    }
  }
</style>
<style>
  @media (max-width: 768px) {
    .el-date-range-picker .el-picker-panel__body {
      min-width: 100%;
    }

    .el-date-range-picker__content {
      width: 100% !important;
    }

    .el-date-range-picker {
      width: 80% !important;
    }

    .el-date-range-picker__content {
      margin: 0px;
      padding: 5px;
    }

    .el-date-range-picker__content.is-left {
      padding-bottom: 0px;
    }

    .el-date-range-picker__content.is-right {
      padding-top: 0px;
    }

    .el-date-table th {
      padding: 0px;
    }

    .el-date-table td {
      padding: 0px;
    }
  }

  @media (max-width: 720px) {
    .el-message-box {
      width: 320px !important;
    }
  }

  @media (max-width: 576px) {
    .el-input {
      width: 100%;
      /* 移动端宽度设置为100% */
    }
  }
</style>
